<template>
  <div class="wx">
    <button @click="getUserInfo">获取用户信息</button>
    <div>{{userInfo.nickname}}</div>
    <img :src="userInfo.headimgurl" alt="">
  </div>
</template>

<script>
import axios from 'axios'
export default {
  setup() {
    const appid = 'wx63f379266b5cf40f'
    const redirectUrl = 'http://ndnut3.natappfree.cc/wx'
    const openUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
    const serveHost = 'http://www.bufantec.com'
    const url=''
    const code = ''

    function getUserInfo() {
      console.log(openUrl)
      window.location.href = openUrl
    }

    return {
      serveHost,
      appid,
      getUserInfo,
      code,
      url,
    }
  },
  data() {
    return {
      userInfo:{
      }
    }
  },
  methods: {
    getInfo() {  
      axios.get(this.url).then(res=>{
        this.userInfo = res.data.data
      })
    }
  },
  mounted() {
    if(this.$route.query.code){
      this.code = this.$route.query.code
      this.url = `${this.serveHost}/wx/user/getUserInfo?appid=${this.$appid}&code=${this.code}`
      this.getInfo()
    }else{
      this.getUserInfo()
    }
  },
}
</script>

<style lang="scss" scoped>
</style>